<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script
  src="https://code.jquery.com/jquery-3.6.1.js"
  integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
  crossorigin="anonymous"></script>
</head>
<body>
    
    <!-- jquery事件注册
         语法：element.事件(function(){})
         $("div").click(function(){事件处理程序})
    -->

    <!-- jquery事件处理
         语法：element.on(events,[selector],fn)
         1,events：一个或多个空格分隔的事件类型。如“click
         2，selector：元素的子元素选择器
         3，fn：回调函数即绑定在元素身上的监听函数
    -->
    <div></div>
    <script>
        $(function(){
            // 1,单个事件注释
            $("div").click(function(){
                $(this).css("background","blue")
            })
            $("div").mouseenter(function(){
                $(this).css("background","skyblue")
            })
            // 2,事件处理on
             $("div").on({
                mouseenter:function(){
                    $(this).css("background","skyblue")
                },
                click:function(){
                    $(this).css("background","blue")
                }
             })
            //  方法2
            $("div").on("mouseenter mouseleave",function(){
                $(this).toggleClass("current")
            })

            // (2)on可以实现事件委托（委托）
            // $("ul li").click()
            $("ul").on("click","li",function(){
                alert(11)
            })
            // click是绑定在ul身上的，但是触发的对象是ul里面的小li
            // (3)on可以给动态创建的元素绑定事件
              $("ol").on("click","li",function(){
                alert(11)
              })
              var li = $("<li>我是后来创建的</li>")
              $("ol").apped(li)

            })

    </script>
</body>
</html>